
<!-- 工单管理（小程序） -->
<template>
    <div class="page">
        <div class="query">
              <el-form :ref="query" :form="query" :inline="true" label-width="6em">
                  <el-form-item label="报警位置">
                      <el-select style="width: 120px" v-model="query.doorDeviceType" size="small">
                          <el-option label="全部" :value="null"></el-option>
                          <el-option v-for="(value, key) in doorDeviceTypeList" :key="value.label" :label="value.label"
                              :value="value.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="设备" label-width="4em">
                      <el-select v-model="query.status" size="small" style="width: 120px">
                          <el-option :value="null" label="全部"></el-option>
                          <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label"
                              :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="事件状态">
                      <el-select v-model="query.status" size="small" style="width: 120px">
                          <el-option :value="null" label="全部"></el-option>
                          <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label"
                              :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="预警时间" label-width="5em">
                      <el-date-picker v-model="query.lastLoginTime" end-placeholder="结束时间" size="small"
                          start-placeholder="开始时间" type="daterange" value-format="yyyy-MM-dd">
                      </el-date-picker>
                  </el-form-item>
                  <el-form-item>
                      <el-button size="small" type="primary" @click="gitList">查询</el-button>
                      <el-button size="small" @click="handleReset">重置</el-button>
                  </el-form-item>
              </el-form>
          </div>
        <div class="content-row">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="名称" align="center" width="120">
                </el-table-column>
                <el-table-column prop="weiz" label="位置信息" align="center">
                </el-table-column>
                <el-table-column prop="deName" label="设备名称" align="center">
                </el-table-column>
                <el-table-column prop="url" label="事件照片" align="center" width="120">
                  <template slot-scope="scope">
                        <img style="width:40px;height: 40px;" src="../../../public/static/image/huo_1.png" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="baojingTime" label="报警时间" align="center">
                </el-table-column>
                <el-table-column prop="sjState" label="事件状态" align="center" width="120">
                  <template slot-scope="scope">
                        <el-tag type="warning">待审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="220">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleEdit(scope.row.sysWorkApplyId)">督办</el-button>
                          <el-button size="mini" type="text" @click="handleDatail(scope.row)">查看事件</el-button>
                      </template>
                  </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="query.page" :page-sizes="[5, 10, 20, 30, 40]" :page-size="query.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="详情信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <div style="line-height: 40px;"><span>名称：</span><span>{{ detailedData.name }}</span></div>
          <div style="line-height: 40px;"><span>位置信息：</span><span>{{ detailedData.weiz }}</span></div>
          <div style="line-height: 40px;"><span>设备名称：</span><span>{{ detailedData.deName }}</span></div>
          <div style="line-height: 40px;"><span>报警时间：</span><span>{{ detailedData.baojingTime }}</span></div>
          <div style="line-height: 40px;"><span>事件状态：</span><span>{{ detailedData.sjState == 0?'待审核':'处理中' }}</span></div>
          <div style="line-height: 40px;">
            <div style="line-height: 40px;">事件图片：</div>
            <img style="width: 220px;" src="../../../public/static/image/huo_1.png" alt="">
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
    </div>
  </template>

<script>
import { } from '../../api/api'
import commonFunction from '../../utils/commonFunction'
import commonData from '../../utils/commonData'
export default {
  data () {
    return {
      dialogVisible: false,
      query: {
        page: 1,
        size: 5,
        lastLoginTime: '',
        status: '',
        deviceType: ''
      },
      detailedData: [],
      deviceStatusList: [],
      doorDeviceTypeList: [],
      total: 0,
      tableData: [
        { name: '火情报警', weiz: 'xx街道', deName: 'A1点位', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', baojingTime: '2022-10-08  10:00', sjState: 0 },
        { name: '火情报警', weiz: 'xx街道', deName: 'A1点位', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', baojingTime: '2022-10-08  10:00', sjState: 1 }
      ],
      inspectionState: []
    }
  },
  created () {
    this.gitList()
  },
  methods: {
    handleReset () {

    },
    gitList () {

    },
    handleDatail (e) {
      this.dialogVisible = true
      this.detailedData = e
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 分页
    handleSizeChange (val) {
      this.pageLimit.size = val
      this.gitList()
    },
    handleCurrentChange (val) {
      this.pageLimit.page = val
      this.gitList()
    }
  }
}
</script>

  <style scoped>
  .page {
    position: relative;
    height: 100%;
  }

  .dialog_butt {
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0px;
  }

  .nuclein-query {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #DCDFE6;
  }

  .device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
  }

  .device-type>p {
    margin-right: 20px;
  }

  .content-row {
    overflow: hidden;
  }

  .device-type {
    display: flex;
    align-items: center;
    padding: 20px 20px 10px 20px;
  }

  .query {
      padding: 20px;
      padding-bottom: 0px;
      border-bottom: 1px solid #ccc;
  }
  /* 分页 */
  .pagination {
    width: 100%;
    padding: 20px;
    border-top: 1px solid #DCDFE6;
  }
  </style>
